<template>
	<view class="findbox bj_center">
		<view class="gamefbox">
			<view class="gamefbox-tit">
				{{$t('index.gf')}}
				<image src="/static/xx.png" @click="findact(false)"></image>
			</view>
			<view class="gamefbox-ginfo">
				<view class="gamefbox-inpbox bj_left">
					<image src="/static/f.png" mode=""></image>
					<input type="text" v-model="inp" @input="getlist" value="" :placeholder="$t('index.gf2')" />
				</view>

				<view class="gamelistbox2 mb30">
					<view class="clearfloat mb30 gamelistbox2-glbox">
						<gameitemVue v-for="si in datalist" :obj="si"></gameitemVue>
					</view>
					<view class="bj_center mb30">
						<progress class="gamelistbox2-progress" :percent="bfb" :activeColor="'#FFBE32'"
							:backgroundColor="'#0D113B'"></progress>
						<text class="f24">{{bfb}}%</text>
					</view>
					<view class="bj_center">
						<view class="gamelistbox2-btn" @click="fy">
							{{$t("morebtn")}}
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		inject,
		provide
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import gameitemVue from './gameitem.vue';
	import common from '../../js/common';
	const findact = inject("findact")
	let inp = ref("")

	let datalist = ref([])
	let bfb = ref(0);
	let list = ref([])
	let nowindex = 0
	let pagesize = ref(16)

	onShow(function() {
		getlist();
	})


	function getlist() {
		datalist.value = []
		common.getGameList({
			pageNumber: 1,
			pageSize: 9999,
			col_type: "1",
			type_id: 27,
			game_name: inp.value
		}).then(res => {
			list.value = res.data.list
			fy();
		})
	}

	function fy() {
		let max = 0;
		if (nowindex + pagesize.value > list.value.length) {
			max = list.value.length
		} else {
			max = nowindex + pagesize.value
		}

		for (let i = nowindex; i < max; i++) {
			let json = list.value[i];
			json.op = true
			datalist.value.push(json);
		}
		nowindex = max
		bfb.value = Number(nowindex / list.value.length * 100).toFixed(0)
		// console.log(datalist.value);
	}
</script>

<style lang="scss">
	@media (min-width: 768px) {
		.findbox {
			left: calc(50vw - 375rpx) !important;
			width: 750rpx !important;
			/* 与主容器同宽 */
		}
	}

	.findbox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		/* 100% 相对于 #app 的宽度 */
		height: 100%;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;
	}

	.gamefbox {
		width: 698rpx;
		background: linear-gradient(180deg, #1E3298 0%, #1C6882 100%);
		border-radius: 20rpx;

		&-tit {
			text-align: center;
			position: relative;
			width: 698rpx;
			height: 112rpx;
			line-height: 112rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			background: linear-gradient(180deg, #50B6E9 0%, #186AD8 100%);
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			image {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				top: 36rpx;
				right: 30rpx;
			}
		}

		&-ginfo {
			padding: 20rpx 24rpx;
		}

		&-inpbox {
			width: 650rpx;
			height: 64rpx;
			background: #0D113B;
			border-radius: 100rpx;
			border: 2rpx solid #212957;
			padding: 0 22rpx;
			margin-bottom: 20rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}

			input {
				font-size: 24rpx;
				width: 80%;
			}
		}
	}

	.gamelistbox2 {
		padding: 0 18rpx;

		&-glbox {
			height: calc(160rpx * 5);
			overflow-y: auto;
		}

		&-progress {
			width: 160rpx;
			height: 16rpx;
			border-radius: 100rpx;
			margin-right: 20rpx;
			overflow: hidden;
		}

		&-btn {
			width: 256rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #247BFF;
			border-radius: 12rpx;
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>